<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="设备编号/资产编号:" prop="text" label-width="140px">
          <el-col :span="6">
            <el-input v-model="queryParams.text" clearable style="width:300px;"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="起止时间:" >
          <el-date-picker
            v-model='queryParams.dateTime'
            type='datetimerange'
            :picker-options='pickerOptions'
            range-separator='至'
            start-placeholder='开始日期'
            end-placeholder='结束日期'
            align='right'
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change='changeTime'
            clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="维度:" prop="dimension">
          <el-select
            v-model="queryParams.dimension"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="dict in dict.type.time_dimension"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <ExportExcel :list="exportList" :tHeader="tHeader" :tValue="tValue" filename="排面陈列" buttonName="数据导出"></ExportExcel>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getContainerTypeList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="displayData" @selection-change="handleSelectionChange" :default-sort = "{prop: 'id', order: 'descending'}">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="资产编号" prop="assetCode" align="center">
        <template slot-scope="scope">
          <el-popover placement="top" width="180" trigger="hover">
            <p>设备id ：{{ scope.row.deviceId }}</p>
            <p>设备名称：{{ scope.row.deviceName }}</p>
            <p>柜子类型 ：{{ scope.row.containerModel || '暂未绑定'}}</p> 
            <span slot="reference">{{ scope.row.assetCode || '暂未绑定' }}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="纯净度" prop="purity" align="center"></el-table-column>
      <el-table-column label="纯净度（空）" prop="purityEmpty" align="center"></el-table-column>
      <el-table-column label="黄金位纯度" prop="goldPurity" align="center"></el-table-column>
      <el-table-column label="黄金位纯度（空）" prop="goldPurityEmpty" align="center"></el-table-column>
      <el-table-column label="黄金位饱和度" prop="goldSaturation" align="center"></el-table-column>
      <el-table-column label="饱和度" prop="saturation" align="center"></el-table-column>
      <el-table-column label="采集时间" :show-overflow-tooltip="true" prop="date" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.date }}</span>  
        </template>
      </el-table-column>
      <el-button type="info" icon="el-icon-wenduji1" circle></el-button>
      <el-table-column label="所属商户" prop="username" align="center">
        <template slot-scope="scope">
          {{  scope.row.username || '-' }}
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getContainerTypeList"
    />
  </div>
</template>

<script>
export default {
  name: "display-report",
  dicts:['time_dimension'],
  data() {
    return {
      // 表格数据
      displayData:[],
      // 日期选择
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 导出数据
      exportList: [],
      // excel抬头
      tHeader: ['时间','资产编号','设备编号','纯净度（含空位）','纯净度（不含空位）','饱和度','黄金位纯进度(含空位)','黄金位纯进度(不含空位)','黄金位饱和度'],
      // excel数据
      tValue: ['date','assetCode','deviceId','purityEmpty','purity','saturation','goldPurityEmpty','goldPurity','goldSaturation'],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 选中项目名数组
      names: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 项目表格数据
      containerTypelList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        text: '',//设备编号 或 资产编号
        dateTime:'',
        startDate:'',//开始日期,格式: 2023-02-20
        endDate:'', //结束日期,格式: 2023-02-20
        dimension: null, // 时间维度（日/周/月/季度）日：1，周：2，月：3，季度:4
        orderByColumn:'id',
        isAsc:'desc'
      },
    };
  },
  created() {

  },
  methods: {
    // 获取陈列数据列表
    getDisplayDataList(){
      if(this.queryParams.dateTime[0]){
        this.queryParams.startDate = this.queryParams.dateTime[0].slice(0,10)
      }
      if(this.queryParams.dateTime[1]){
        this.queryParams.endDate = this.queryParams.dateTime[1].slice(0,10)
      }
      const params = {
        text:this.queryParams.text,
        startDate:this.queryParams.startDate,
        endDate:this.queryParams.endDate,
        dimension:this.queryParams.dimension,
        userId:this.$store.state.user.id
      }
      console.log(params)
      this.loading = true
      getFirstCoverDisplayByText(params)
        .then((res) => {
          console.log('## display data', res)
          this.displayData = res.data.data
          this.total = res.data.totalCount
        })
        .catch((err) => {
          this.$message.error(err.message)
          console.log('## list error ==>', err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 表单重置
    reset() {
      this.form = {}
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getDisplayDataList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.names = selection.map(item => item.model)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },




  }
};
</script>
<style lang="scss">
.formTitle{
  width:100%;
  text-align:center;
  margin:15px 0 15px 0;
  font-weight:border;
  font-size:20px
}
</style>
